<template>
	<view class="page">

		<view class="nav_bar" :style="`background-color: rgba(255, 255, 255, ${trans});`">
			<uni-nav-bar :color="color" :left-icon="have_token ? 'left' : '' " title="" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="back"></uni-nav-bar>
		</view>

		<view class="header">

			<swiper class="swiper-box" @change="change" :current="current">
				<swiper-item v-for="(item, index) in images_photos" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>

			<view class="swiper-dot flex_center">

				<view class="upload-images flex_r_around" @click="choosePhotos">
					<image :src="$util.prefix('public/upload-images.png')" mode="aspectFill"></image>
				</view>

				<view class="swiper-dot-flex-box">
					<scroll-view scroll-x="true">
						<view class="swiper-dot-list flex_center">
							<view class="item" v-for="(item,index) in images_photos" :key="index"
								:id="index == current ? 'select' : ''" @click="current = index">
								<image :src="item" mode="aspectFill"></image>

								<view class="swiper-dot-icon" @click.stop="onDetele(index)">
									<u-icon name="close-circle-fill" size="32rpx" color="#FD2A53"></u-icon>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

		</view>

		<view class="content">
			<view class="title">基本信息</view>

			<view class="input_box flex_r_between" @click="chooseAvatar">
				<text class="label">头像</text>
				<view class="avatar flex_center">
					<image :src="info.avatar" mode="aspectFill" class="avatar_image"></image>
					<image :src="$util.prefix('public/arrow-right-fill.png')" class="icon_image"></image>
				</view>
			</view>

			<view class="input_box flex_center">
				<text class="label">昵称</text>
				<input type="text" v-model="info.nickname" placeholder="请输入" placeholder-class="input-placeholder" />
			</view>

			<picker mode="date" :start="startDate" :end="endDate" @change="onAge">
				<view class="choose_box flex_r_between">
					<text class="label">年龄</text>
					<view class="view flex_center">
						<text class="text hidden">{{ info.age }}</text>
						<u-icon name="arrow-right" color="#131313" :size="16"></u-icon>
					</view>
				</view>
			</picker>


			<view class="choose_box flex_r_between" @click="show_sex = true">
				<text class="label">性别</text>
				<view class="view flex_center">
					<text class="text hidden">{{info.gender == 0 ? '女' : '男'}}</text>
					<u-icon name="arrow-right" color="#131313" :size="16"></u-icon>
				</view>
			</view>

			<view class="sign">
				<view class="text_write">
					<textarea v-model="info.sign" placeholder="员工介绍" placeholder-class="input-placeholder"></textarea>
				</view>
			</view>

			<!-- 标签 -->
			<view class="tags flex_center">
				<view class="tags-label">标签</view>
				<view class="tags-content">
					<scroll-view scroll-x="true">
						<view class="tags_list flex_center">
							<view class="tags_item flex_r_around" v-for="(item,index) in info.tags" :key="index">
								<text>{{ item }}</text>
								<view class="tags_list_icon" @click="info.tags.splice(index , 1)">
									<u-icon name="close-circle-fill" color="#FD2A53" size="32rpx"></u-icon>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="tags-btn flex_r_around" @click="show_tags = true">
					<text>添加</text>
				</view>

			</view>

		</view>

		<button @click="onSubmit">保存</button>

		<u-popup :show="show_tags" @close="show_tags = false" mode="center" round="40rpx">
			<view class="modal_tags">
				<view class="modal_title flex_r_between">
					<text>标签</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show_tags = false"></u-icon>
				</view>

				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="tags_input"
						maxlength="6"></textarea>
				</view>

				<view class="modal_btn flex_r_around" @click="onEenterTag">
					<text>确定</text>
				</view>

			</view>
		</u-popup>

		<u-action-sheet :actions="sex_list" title="" :show="show_sex" @close="show_sex = false" @select="onSex"
			cancelText="取消">
		</u-action-sheet>

		<w-compress ref='wCompress' />

		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="show_register" mode="center" @close="show_register = false" bgColor="transparent">
				<view class="register flex_c">
					<view class="logo">
						<image :src="$util.prefix('logo.png')" mode="aspectFill"></image>
					</view>

					<view class="input flex_center">
						<input type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="input-placeholder"
							v-model="mobile" />
					</view>

					<view class="input flex_center">
						<input type="number" maxlength="6" placeholder="请输入验证码" placeholder-class="input-placeholder"
							v-model="code" />
						<view class="code_btn" @click="getCode">
							{{sending ? `已发送${num}` : '获取验证码'}}
						</view>
					</view>

					<view class="text flex_center">
						<i>*</i>
						<text>手机号用于验证并绑定账号</text>
					</view>

					<view class="register_btn flex_r_around" @click="onSubmitLogin">
						<text>确定</text>
					</view>

				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue';
	export default {
		components: {
			WCompress
		},
		data() {
			return {
				current: 0,
				images_photos: [],

				trans: 0,
				color: '#FFF',

				sex_list: [{
						name: '女',
						gender: 0,
					},
					{
						name: '男',
						gender: 1,
					},
				],
				show_sex: false,


				info: {
					avatar: '',
					nickname: '',
					sign: '',
					tags: [],
					age: '',
					// 0 女 1 男
					gender: 0,
					images: '',
					mobile: '',
					store_id: 0,
					user_id: 0,
				},

				tags_input: '',
				show_tags: false,

				startDate: '',
				endDate: '',

				store_id: 0,
				data: {},

				show_register: false,
				mobile: '',
				code: '',

				num: 60,
				sending: false,

				user_mobile: '',

				have_token: false,


			}
		},
		methods: {
			preventHandler() {
				return;
			},

			back() {
				if (this.have_token) {
					this.$native.backAction();
				}
			},

			change(e) {
				this.current = e.detail.current;
			},

			choosePhotos() {
				if (this.images_photos.length >= 9) {
					return this.$util.msg('最多添加九张');
				}
				uni.chooseImage({
					count: 1,
					sizeType: 'compressed',
					crop: {
						width: 500,
						height: 500
					},
					success: (file) => {
						this.$refs.wCompress.start(file.tempFilePaths[0], {
							pixels: 2000000, // 最大分辨率，默认二百万
							quality: 0.6, // 压缩质量，默认0.8
							type: 'png', // 图片类型，默认jpg
							// base64: false, // 是否返回base64，默认false，非H5有效
						}).then(url => {
							uni.navigateTo({
								url: `/pages/index/cropper?src=${file.tempFilePaths[0]}&width=750&height=422`,
								events: {
									getImage: (data) => {
										this.images_photos.push(data.src)
									}
								}
							});
						});
					},
					fail(err) {
						this.$util.msg(err)
					}
				})
			},

			onEenterTag(e) {
				if (!this.tags_input) {
					return this.$util.msg('请填写标签')
				}
				if (this.info.tags.length < 10) {
					this.info.tags.push(this.tags_input);
				}
				this.tags_input = '';
				this.show_tags = false;
			},

			// 头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: 'compressed',
					crop: {
						width: 500,
						height: 500
					},
					success: (file) => {
						uni.navigateTo({
							url: `/pages/index/cropper?src=${file.tempFilePaths[0]}`,
							events: {
								getImage: (data) => {
									// console.log(data,'参数')
									this.info.avatar = data.src
								}
							}
						});
					},
					fail(err) {
						this.$util.msg(err)
					}
				})
			},

			// 性别
			onSex(e) {
				this.info.gender = e.gender;
			},

			// 选择生日
			getTime() {
				this.startDate = this.getDate('start');
				this.endDate = this.getDate('end');
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 100;
				} else if (type === 'end') {
					year = year - 18;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			onAge(e) {
				this.info.age = this.mymethod(e.detail.value);
			},

			mymethod(birthday) {
				if (birthday) {
					var str = birthday
					birthday = birthday.split('-');
					// 新建日期对象
					let date = new Date()
					// 今天日期，数组，同 birthday
					let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
					// 分别计算年月日差值
					let age = today.map((val, index) => {
						return val - birthday[index]
					})
					// 当天数为负数时，月减 1，天数加本月总天数
					if (age[2] < 0) {
						// 获取当月总天数的方法
						let curMonth = new Date(today[0], today[1], 0)
						age[1]--
						age[2] += curMonth.getDate()
					}
					// 当月数为负数时，年减 1，月数加上 12
					if (age[1] < 0) {
						age[0]--
						age[1] += 12
					}
					return age[0];
				} else {
					return '';
				}
			},

			onSubmit() {
				if (!this.info.avatar) {
					return this.$util.msg('清添加头像');
				}

				if (!this.info.nickname) {
					return this.$util.msg('清填写昵称');
				}

				// if(!this.info.mobile){
				// 	return this.$util.msg('清填写手机号');
				// }

				if (!this.info.sign) {
					return this.$util.msg('清填写介绍');
				}

				if (!this.info.age) {
					return this.$util.msg('清填写年龄');
				}

				if (!this.images_photos.length) {
					return this.$util.msg('清添加相册图片');
				}

				if (!this.info.tags.length) {
					return this.$util.msg('清添加标签');
				}

				this.info.images = this.images_photos.join(',');
				this.info.tags = this.info.tags.join(',');
				this.info.store_id = this.store_id;

				this.$post('/store.store/storeShareProvider', this.info, true, (res) => {
					this.info.tags = this.info.tags.split(',');
				}).then(res => {
					this.$util.msg(res.msg);
					if (this.have_token) {
						this.$native.backAction();
					} else {
						this.$util.toUrl(`/pages/newstore/download?str=${res.data.str}`);
					}
					this.info = {
						avatar: '',
						nickname: '',
						sign: '',
						tags: [],
						age: '',
						// 0 女 1 男
						sex: 0,
						images: '',
						mobile: '',
						store_id: 0
					};

					this.images_photos = [];
				});
			},

			getCode() {
				if (!this.mobile) {
					return uni.showToast({
						title: '请填写手机号',
						icon: "none"
					});
				}

				this.$post('/index/sendSms', {
					mobile: this.mobile,
					scene: 102
				}).then(res => {
					this.$util.msg('已发送');
					this.afterCode()
				})
			},

			afterCode() {
				this.sending = true;
				var timer = setInterval(() => {
					this.num--;
					if (this.num == 1) {
						clearInterval(timer)
						this.num = 60;
						this.sending = false;
					}
				}, 1000)
			},

			onSubmitLogin() {
				if (!this.mobile) {
					return uni.showToast({
						title: '请填写手机号',
						icon: "none"
					});
				}
				if (!this.code) {
					return uni.showToast({
						title: '请填写验证码',
						icon: "none"
					});
				}

				this.$post('/login/login', {
					code: this.code,
					mobile: this.mobile,
					scene: 'mobile',
				}, false, (res => {
					this.$util.msg(res.msg);
				})).then(res => {
					uni.setStorageSync('token', res.data.token);
					uni.setStorageSync('cid', uni.getDeviceInfo().deviceId);
					uni.setStorageSync('terminal', 'H5');
					this.info.user_id = res.data.user_info.id;
					this.show_register = false;
				});
			},

		},

		onLoad(option) {
			this.store_id = option.store_id;
			this.getTime();
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
				this.have_token = true;
			} else {
				this.show_register = true;
				this.have_token = false;
			}
		},

		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop <= 200) {
				this.trans = e.scrollTop / 200;
				if (e.scrollTop <= 100) {
					this.color = '#FFF';
				} else {
					this.color = '#999';
				}
			} else {
				this.trans = 1;
				this.color = '#333';
			}
		},
	}
</script>

<style lang="less" scoped>
	.header {
		height: calc(340rpx + var(--paging-head-top));
		overflow: hidden;
		position: relative;
		
		.swiper-box {
			width: 100vw;
			height: calc(340rpx + var(--paging-head-top));
		
			swiper-item {
				width: 100vw;
				height: calc(340rpx + var(--paging-head-top));
		
				image {
					width: 100vw;
					height: calc(340rpx + var(--paging-head-top));
				}
			}
		}
	
		.swiper-dot {
			position: absolute;
			left: 32rpx;
			bottom: 32rpx;
			width: calc(100vw - 64rpx);
			align-items: flex-end;
	
			scroll-view {
				height: 140rpx;
			}
			
			.swiper-dot-flex-box {
				overflow: hidden;
				height: 140rpx;
				flex: 1;
			}
			
			#select {
				image {
					border: 4rpx solid #FD2A53;
				}
			}
			
			.swiper-dot-list {
				height: 140rpx;
				align-items: flex-end;
			}
			
			.item {
				margin-right: 16rpx;
				position: relative;
				
				.swiper-dot-icon {
					position: absolute;
					right: -16rpx;
					top: -16rpx;
				}
				
				image {
					width: 106rpx;
					height: 106rpx;
					border: 4rpx solid transparent;
					border-radius: 16rpx;
				}
			}
		
			.upload-images {
				width: 114rpx;
				height: 140rpx;
				flex-shrink: 0;
				margin-right: 16rpx;
				padding-top: 4rpx;
				
				image {
					width: 114rpx;
					height: 114rpx;
				}
			}
		
		}
	
	}

	.content {
		padding: 10rpx 32rpx 38rpx;
		margin-top: 0;
		background: #FFFFFF;
	}

	.title {
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #131313;
	}

	.input_box {
		height: 100rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-bottom: 22rpx;

		.label {
			font-size: 32rpx;
			color: #131313;
		}

		input {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #131313;
		}

		.avatar {
			.avatar_image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 36rpx;
			}

			.icon_image {
				width: 22rpx;
				height: 22rpx;
				margin-left: 8rpx;
			}
		}
	}

	.choose_box {
		height: 100rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-top: 20rpx;

		.label {
			font-size: 32rpx;
			color: #131313;
		}

		.view {
			flex: 1;

			.text {
				flex: 1;
				font-size: 28rpx;
				color: #131313;
				text-align: right;
			}
		}
	}

	.sign {
		background: #F8F8F8;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 28rpx;

		.text_write {
			height: 208rpx;
			background: #F8F8F8;
			overflow: hidden;

			textarea {
				font-size: 28rpx;
				color: #131313;
				line-height: 44rpx;
			}
		}
	}

	.tags {
		height: 100rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 0 32rpx;

		.tags_list {
			padding: 0 12rpx;

			.tags_item {
				flex-shrink: 0;
				height: 48rpx;
				background: #E5E5E5;
				border-radius: 8rpx;
				padding: 0 36rpx;
				margin: 8rpx 20rpx 8rpx 0;
				position: relative;

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #131313;
					line-height: 56rpx;
				}

				.tags_list_icon {
					position: absolute;
					right: -12rpx;
					top: -12rpx;
				}

			}
		}

		.tags-label {
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
			flex-shrink: 0;
		}

		.tags-content {
			flex: 1;
			overflow: hidden;

			scroll-view {
				width: 100%;
			}
		}

		.tags-btn {
			width: 112rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 2rpx solid #FD2A53;
			flex-shrink: 0;

			text {
				font-size: 28rpx;
				color: #FD2A53;
				line-height: 40rpx;
			}
		}

	}

	.modal_tags {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 34rpx 16rpx 38rpx 32rpx;

		.modal_title {
			text {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.modal_textarea {
			width: 552rpx;
			height: 208rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 32rpx 0;
			overflow: hidden;

			textarea {
				font-size: 28rpx;
				color: #333;
				line-height: 36rpx;
			}
		}

		.modal_btn {
			width: 320rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			margin: 0 auto;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}

	button {
		width: 560rpx;
		height: 96rpx;
		background: #FD2A53;
		border-radius: 48rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		margin: 80rpx auto 30rpx;
	}

	.register {
		width: 600rpx;
		height: 632rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding-top: 30rpx;

		.logo {
			width: 128rpx;
			height: 128rpx;
			background: #FD4545;
			border-radius: 16rpx;
			overflow: hidden;

			image {
				width: 128rpx;
				height: 128rpx;
			}
		}

		.input {
			width: 480rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #F1F1F1;
			padding: 0 24rpx;
			margin: 32rpx 0 0;

			input {
				flex: 1;
			}

			.code_btn {
				font-weight: 500;
				font-size: 26rpx;
				color: #FD2A53;
				margin-left: 20rpx;
			}
		}

		.text {
			margin: 32rpx 0;

			text {
				font-size: 22rpx;
				color: #999999;
			}

			i {
				color: #FD2A53;
				font-style: normal;
			}
		}

		.register_btn {
			width: 480rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 48rpx;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

	}
</style>